<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script>
        var datas = [
            {
                name: "刘若英",
                age: 40,
                gender: "女",
            }, {
                name: "古天乐",
                age: 38,
                gender: "男",
            }, {
                name: "梁家辉",
                age: 45,
                gender: "男",
            },
        ]


        // 获取tbody
        var tb = document.querySelector('tbody');
        // 遍历datas
        for (var i = 0; i < datas.length; i++) {
            // 创建tr，datas有几个对象就创建几个tr
            var tr = document.createElement('tr');
            // 添加tr
            tb.appendChild(tr);

            // 遍历对象中的属性值
            for (var k in datas[i]) {
                // 创建放对象属性值的td 对象有几个属性就创建几个td
                var td = document.createElement('td');
                // 把属性值赋给td
                td.innerHTML = datas[i][k];
                // 把td添加给tr
                tr.appendChild(td);
            }
            // 创建放删除超链接的td
            var td = document.createElement('td');
            td.innerHTML = "<a href='javascipt:;'>删除</a>"
            tr.appendChild(td);
        }

        // 删除操作
        // 获取a
        var as = document.querySelectorAll('a');
        // 绑定事件
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                tb.removeChild(this.parentNode.parentNode);
            }

        }

        // // 获取tbody
        // var tb = document.querySelector('tbody');
        // // 给tbody中加tr
        // // 获取tr
        // // 遍历datas数组获取每个对象
        // for (var i = 0; i < datas.length; i++) {
        //     //循环时每个对象都创建tr
        //     var tr = document.createElement('tr');
        //     // 把tr放到tb中
        //     tb.appendChild(tr);

        //     // 遍历每个对象的属性值
        //     for (var k in datas[i]) {
        //         // 创建td
        //         var td = document.createElement('td');
        //         // 把每个属性值给td
        //         td.innerHTML = datas[i][k];
        //         // 添加td到tr中
        //         tr.appendChild(td);
        //     }

        //     // 添加删除超链接
        //     var td = document.createElement('td');
        //     td.innerHTML = '<a href="javascript:;">删除</a>';
        //     tr.appendChild(td);
        // }
        // // 获取所有a
        // var as = document.querySelectorAll('a');
        // // 遍历所有的a
        // for (var i = 0; i < as.length; i++) {
        //     // 给a绑定事件
        //     as[i].onclick = function () {
        //         // 移除此a对应的行
        //         tb.removeChild(this.parentNode.parentNode);
        //     }
        // }
    </script>
</body>

</html>